// 1.显示登录人员的欢迎信息  2.校验用户是否登录
let isHaveUid =  getCookie("uid");
		let showNameEle = document.querySelector(".showName");
		if(typeof isHaveUid != "undefined"){
			// 登录了；显示用户名 
			let username = getCookie("username");
			showNameEle.innerHTML = `${username} 欢迎您`;
		}


    //轮播图
      var imgContainerEle = document.querySelector(".imgContainer");
      var containerEle = document.querySelector(".slideshow");
      
      var page = 1;
      
      function autoPlay() {
        var timer = setInterval(function () {
          move(imgContainerEle, -2550 * page - 2550, "left", function () {
            // console.log("运动完成");
            page++;
            if (page == 6) {
              page = 1;
              imgContainerEle.style.left = "-2550px";
            }
            changeDot()
          });
        }, 5000);
        //鼠标移入
        containerEle.onmouseenter = function () {
          clearTimeout(timer);
          
        };
        //鼠标移除
        containerEle.onmouseleave = function () {
          autoPlay();
          
        };
      }
      
      autoPlay();
      cloneElement();
      changeDot()
      function cloneElement() {
        //获取第一页
        var firstEle = imgContainerEle.firstElementChild.cloneNode(true);
        //获取最后一页
        var lastEle = imgContainerEle.lastElementChild.cloneNode(true);
        imgContainerEle.style.width = "17850px";
        //在最后一页后面添加第一页
        imgContainerEle.appendChild(firstEle);
        //在第一页前面添加最后一页
        imgContainerEle.insertBefore(lastEle,imgContainerEle.firstElementChild);
        imgContainerEle.style.left = "-2550px";
      }

    //   小圆点
      var spans = document.querySelectorAll(".dot span");
      spans.forEach(function (item, key) {
        item.onclick = function () {
          spans.forEach(function (item) {
            item.style.height = "3px";
          });
          item.style.height = "6px";

          var num = key + 1;
          move(imgContainerEle, -2550 * num, "left", function () {
            page = num;
          });
        };
      });

      function changeDot(){
        var spans = document.querySelectorAll(".dot span");
        // 先全部变成红色
        spans.forEach(function(item){
            item.style.height="3px"
        })
         // 和page一样的点变成白色；
         spans.forEach(function(item,key){
             if(key==page-1){
                item.style.height="6px"
             }
            
        })
      }
      //防抖
      function debounce(fn,delay){
            var timer=null
            return function(){
                if(!timer){
                    fn()
                }
                if(timer){
                    clearTimeout(timer)
                }
                timer=setTimeout(function(){
                    timer=null
                },delay)
            }
        }
      //运动函数
      function move(ele, target, dir, cb) {
        function fn() {
          var num = parseInt(getComputedStyle(ele)[dir]);
          var speed = target < num ? -10 : 10;
          if (num == target) {
            // console.log("停止了");
            cb && cb();
          } else {
            num += speed;
            ele.style[dir] = num + "px";
            requestAnimationFrame(fn);
          }
        }
        fn();
      }


let p = 1;
let perPage=6;
ajaxxhr();
function ajaxxhr() {
ajax({
  url:"php/getList.php",
  dataType:"json",
  data:{
    p,
    perPage
  },
}).then(res=>{
  console.log(res)
  Dom(res)
})
}

let listEle = document.querySelector(".list")
function Dom(data){
  listEle.innerHTML="";
  data.forEach(function(item){
    let liEle = document.createElement("li")
  liEle.innerHTML=`<a href="detail.html?id=${item.id}"><img src="${item.img}" alt=""></a>
  <h3>${item.pname}</h3>
  <h4>${item.pname1}</h4>
  <p>￥${item.price}</p>`;
  listEle.appendChild(liEle)
  })
  
}


pages()
function pages(){
  ajax({
    url: "php/getPage.php",
    dataType: "json",  
    data:{
      perPage
    }
  }).then(res=>{
      // console.log(res);
      let totalPage = res.totalPage; //分页的数量；
      // 生成分页 ；
      let pageEle = document.querySelector(".page");
      pageEle.innerHTML = "";
      for (let i = 1; i <= totalPage; i++) {
        let aEle = document.createElement("a");
        aEle.innerHTML = i;
        pageEle.appendChild(aEle);

        //点击分页
        aEle.onclick = function () {
          let page = this.innerText;
          // console.log(page);
          p = page;
          ajaxxhr();
        };
        //   console.log(p);
      
      //上一页和下一页
      let prev = document.querySelector(".prev");
      let next = document.querySelector(".next");
      prev.onclick = function () {
        if (p == 1) {
          p = 1;
          ajaxxhr();
        } else {
          p -=1;
          ajaxxhr();
        }
      };
      next.onclick = function () {
        if (p == totalPage) {
          p = totalPage;
          ajaxxhr();
        } else {
          p ++;
          ajaxxhr();
        }
      }
      };
    
  })
}
